<template>
  <a-modal
    :title="`${ okHidden ? '' : model && model.id ? '编辑' : '新建'}分类`"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-if="model && model.id" label="主键ID" hidden>
          <a-input v-decorator="['id', { initialValue: model.id }]" disabled />
        </a-form-item>
        <a-form-item label="分类名称">
          <a-input :disabled="okHidden" placeholder="请输入选项内容" v-decorator="['class_name', {initialValue: model.class_name, rules: [{required: true, message: '选项内容不能为空！' }, {max: 10, message: '最大可输入10个字符！' }]}]" />
        </a-form-item>
        <!-- <a-form-item label="状态">
          <a-input :disabled="okHidden" v-decorator="['status']" />
        </a-form-item> -->
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['id', 'class_name']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    okHidden: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    }
    return {
      form: this.$form.createForm(this),
      currentLength: 0
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', n => {
      if (n) {
        const data = pick(this.model, fields)
        // 查看模式用v-html不插值
        if (this.okHidden) {
          delete data.content
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(data)
        })
      }
    })
  },
  components: {
  }
}
</script>

<style scoped>
  >>> .ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0
  }
  >>> .clearfix {
    height: 110px
  }
  >>> .remove70 {
    margin-bottom: 110px !important;
    height: 300px !important;
  }
  .htm {
    min-height: 40px;
    max-height: 350px;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid #eee
  }
</style>
